<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Member Viewer</title>
    <link rel="stylesheet" href="../../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="modal.css"/>
	<style type="text/css">
	.site-bgcolor{
		background:AliceBlue
	}
		.v-link-active-exact {
    color: red;
		}
	</style>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/foo' }">Go to /foo</a>
    <a v-link="{ path: '/foo/bar' }">Go to /foo/bar</a>
    <a v-link="{ path: '/foo/baz' }">Go to /foo/baz</a>
  </p>
  <router-view></router-view>
</div>



    <script src="../../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../../node_modules/vue-router/dist/vue-router.min.js"></script>

<script>
// define some components
var Foo = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- nested outlet
    '</div>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})

var Baz = Vue.extend({
    template: '<p>This is baz!</p>'
})

// configure router
var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/': {
        // This component will be rendered into Foo's <router-view>
        // when /foo is matched. Using an inline component definition
        // here for convenience.
        component: {
          template: '<p>Default sub view for Foo</p>'
        }
      },
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

// start app
var App = Vue.extend({})
router.start(App, '#app')
</script>
</body>
</html>
